<template>
    <div style="background-color: #f9fafd;padding-top: 59px;">
        <div class="w centerauto">
            <el-breadcrumb separator-class="el-icon-arrow-right" style="line-height: 60px;">
                <el-breadcrumb-item :to="{ path: '/projectslist' }">项目大厅</el-breadcrumb-item>
                <el-breadcrumb-item>项目详情</el-breadcrumb-item>
            </el-breadcrumb>
            <div>
                <el-row :gutter="20">
                    <el-col :span="18">
                        <div class="white_bg">
                            <div class="detail_main">
                                <div class="detail__top">
                                    <div class="detail__top_tit flexbox spacebetween">
                                        <p>{{detailsData.p_name}}</p>
                                        <span>￥{{detailsData.p_budget | re_p_budget}}</span>
                                    </div>
                                    <div class="detail__tag-list">
                                        <span class="tag-list tag-list--info">{{detailsData.p_status | re_p_status}}</span>
                                        <span class="tag-list" v-for="(item,index) in detailsData.p_skills_name_arr" :key="index">{{item}}</span>
                                    </div>
                                </div>
                                <div class="detail__bot">
                                    <div class="detail__main">
                                        <p>发布日期：<span>{{detailsData.p_adopt_time | adopt_time}}</span></p>
                                        <p>项目周期：<span>{{detailsData.p_cycle}}{{detailsData.p_cycle_type | rep_cycle_type}}</span></p>
                                        <p>岗位需求：<span>{{detailsData.p_job_demand_name}}</span></p>
                                        <p>技能要求：<span>{{detailsData.p_skills_name}}</span></p>
                                        <p>合作倾向：<span>{{(detailsData.p_range == 1) ? '不限':(detailsData.p_range == 2)?'个人':'企业'}}</span></p>
                                    </div>
                                    <el-button type="primary" class="jb_btn" @click="biddingFun(detailsData.p_id)">竞标报名</el-button>
                                </div>
                            </div>
                            <div class="detail___main">
                                <p class="main__title">需求描述</p>
                                <div class="main__text">
                                    <div v-html="detailsData.p_content"></div>
                                </div>
                                <p class="main__title">附件</p>
                                <div class="main__file">
                                    <div v-for="(item,index) in detailsData.p_enclosure_name
" :key="index">
                                        <span style="display: inline-block;line-height: 30px;color: #2093ff;cursor: pointer;" @click="downloadFile(item.f_id,item.f_old_name,item.f_file_type)">{{item.f_old_name}}.{{item.f_file_type}}</span>
                                        
                                    </div>
                                    
                                </div>
                                <div class="main__btn text-right">
                                    <el-button type="primary" @click="getPhone">获取手机号</el-button>
                                </div>
                            </div>
                        </div>
                        <div class="biddingUserList white_bg">
                            <p class="bidding_title">报名列表</p>
                            <ul class="bidding_list clearfix">
                                <li class="user-box col-7" v-for="(item,index) in detailsData.p_bidding_info
" :key="index">
                                    <router-link :to="{path:'/homepage', query:{id: item.u_id}}" class="displayB">
                                        <img v-if="item.u_head_portrait" :src="item.u_head_portrait" alt="" width="48" height="48" class="displayB centerauto borderRadius">
                                        <img v-else src="../../assets/images/userPic.png"  alt="" width="48" height="48" class="displayB centerauto borderRadius">
                                        <p class="text-center bidding_list_name">{{item.u_nickname}}</p>
                                    </router-link>
                                </li>
                            </ul>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="bidding_main-user white_bg">
                            <router-link :to="{path:'/homepage', query:{id: detailsData.u_id}}" class="displayB paddingTB20">
                                <img v-if="detailsData.u_head_portrait" :src="detailsData.u_head_portrait" alt="" width="90" height="90" class="displayB centerauto borderRadius bidding_user_pic">
                                <img v-else src="../../assets/images/userPic.png" alt="" width="90" height="90" class="displayB centerauto borderRadius bidding_user_pic">
                            </router-link>
                            <p class="bidding_user_name text-center">{{detailsData.u_nickname}}</p>
                            <p class="bidding_user_maininfo text-center">{{detailsData.upName}} | {{(detailsData.u_type == 1) ? '个人': '企业'}}</p>
                            <div class="bidding_user_icons text-center">
                                <img v-if="detailsData.authentication == 1" src="../../assets/images/cert.png" :title="((detailsData.u_type == 1) ? '个人': '企业') + '已认证'" class="cert">
                                <img v-if="detailsData.authentication == 2" src="../../assets/images/cert_non.png" :title="((detailsData.u_type == 1) ? '个人': '企业') + '未认证'" class="cert">
                                <img v-if="detailsData.p_contacts_email != ''" src="../../assets/images/emails.png" title="邮箱已认证" class="emails">
                                <img v-if="detailsData.p_contacts_email == ''" src="../../assets/images/email_non.png" title="邮箱未认证" class="emails">
                                <img v-if="detailsData.p_contacts_phone != ''" src="../../assets/images/mobile.png" title="手机已认证" class="mobile">
                                <img v-if="detailsData.p_contacts_phone == ''" src="../../assets/images/mobile_non.png" title="手机已认证" class="mobile">
                            </div>
                            <div class="bidding_user__main clearfix" @mouseover="isShow = true" @mouseout="isShow = false" style="position: relative;">
                                <div class="bidding_main__item">
                                    <h4>{{detailsData.all_num}}</h4>
                                    <p>发布总数</p>
                                </div>
                                <!-- <div class="bidding_main__item">
                                    <h4>--</h4>
                                    <p>发包综合评价</p>
                                </div> -->
                                <!-- <div class="bidding_main__evaluate" v-show="isShow">
                                    <p class="bidding_evaluate__all">需求稳定性&nbsp;&nbsp;--</p>
                                    <p class="bidding_evaluate__all">付款及时性&nbsp;&nbsp;--</p>
                                    <p class="bidding_evaluate__all">验收及时性&nbsp;&nbsp;--</p>
                                    <p class="bidding_hezuo_txt">来自已合作的 <span class="bolds">0</span> 位服务方评价数据计算</p>
                                </div> -->
                            </div>
                            

                        </div>
                        <div class="bidding_panel border_top_blue white_bg">
                            <p class="bidding_title bidding_title_41">竞标流程指引</p>
                            <ul class="bidding_list bidding_step_list clearfix">
                                <li v-for="(item,index) in stepData" :key="index">
                                    <span class="zb-orderly-mark">{{item.num}}</span>{{item.txt}}
                                </li>
                            </ul>
                        </div>
                        <div class="bidding_panel border_top_blue white_bg">
                            <p class="bidding_title bidding_title_41">提高中标率</p>
                            <ul class="bidding_list bidding_step_list clearfix">
                                <li v-for="(item,index) in chooseData" :key="index">
                                    <span class="zb-orderly-mark">{{item.num}}</span>{{item.txt}}
                                </li>
                            </ul>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <!-- 积分获取雇主电话 -->
        <el-dialog :visible.sync="getPhoneDialog" width="430px" center :close-on-click-modal="false">
            <div class="get_phone_content">
                <img src="../../assets/images/exchange_phone.png" alt="" width="245" class="displayB centerauto" style="margin-top: -25px;">
                <h4 class="get_phone_explain text-center">支付 {{integral.s_consume_integral}} 积分，兑换雇主电话</h4>
                <div class="get_phone_info flexbox spacebetween">
                    <p>我的接包积分</p>
                    <p>{{integral.u_integral}}</p>
                </div>
                <div class="get_phone_info flexbox spacebetween">
                    <p>雇主电话</p>
                    <p>{{gzPhone}}</p>
                </div>
                <el-button type="primary" @click="dhPhone" style="width:100%;margin-top: 20px;">{{(gzPhone != '***********')?'关闭':'立即兑换'}}</el-button>
            </div>
        </el-dialog>
    </div>
    
</template>
<script>
    
    import '../../assets/css/main.css'
    import '../../assets/css/projects.css'
    import axios from 'axios';
    export default {
        data(){
            return{
                detailsData: {},
                isShow: false,
                stepData: [
                    {'num': 1, 'txt': '理解需求、提交竞标方案'},
                    {'num': 2, 'txt': '绑定手机关注中标通知提醒'},
                    {'num': 3, 'txt': '收到中标合同并确认'},
                    {'num': 4, 'txt': '按照实施阶段计划开展实施'},
                    {'num': 5, 'txt': '完成项目，双方互评'},
                ],
                chooseData: [
                    {'num': 1, 'txt': '完善您的相关信息，尤其是技术能力与专业经验'},
                    {'num': 2, 'txt': '认真详细阅读理解项目需求，认真详细填写竞标方案与您的竞标优势'},
                    {'num': 3, 'txt': '我们拒绝恶意报价，一份真实且具有竞争力的报价无疑可以让您更容易中标'},
                    {'num': 4, 'txt': '积极响应与发包方的沟通交流，体现良好的职业素养及专业能力'},
                    {'num': 5, 'txt': '维护并保持您在平台的综合评价及信用等级良好'},
                ],
                getPhoneDialog: false,  //获取电话   弹框
                integral: {},  //积分
                gzPhone: '***********',  //雇主电话
            }
        },
        filters: {
            //项目金额
            re_p_budget: function (value) {
                var val = 0;
                if (value == 1){
                    val = '3000以下';
                }else if (value == 2){
                    val = '3000-5000';
                }else if (value == 3){
                    val = '5000-10000';
                }else if (value == 4){
                    val = '10000-50000 ';
                }else if (value == 5){
                    val = '50000-100000';
                }else if (value == 6){
                    val = '100000 以上';
                }
                return val;
            },
            //项目周期单位
            rep_cycle_type: function(value){

                var val = '';
                if(value == 1){
                    val = '天';
                }else if(value == 2){
                    val = '周';
                }else if(value == 3){
                    val = '月';
                }
                return val;
            },
            //截取日期字符串
            adopt_time: function(value){
                if(value){
                    return value.substr(0,10)
                }else{
                    return ''
                }
            },
            //项目状态
            re_p_status: function (value) {
                var val = '';
                if (value == 1){
                    val = '待发布';
                }else if (value == 2){
                    val = '审核中';
                }else if (value == 3){
                    val = '竞标中';
                }else if (value == 4){
                    val = '审核失败 ';
                }else if (value == 5){
                    val = '已完成';
                }
                return val;
            },
        },
        methods: {
            init(){
                var _this = this;

                // 应用类型
                this.$httpGet('/api/index/Project/projectDetail',{
                    'p_uid': window.localStorage.uid,
                    'p_id': _this.$route.query.id
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.detailsData = response.msg;

                        _this.detailsData.p_content = _this.escapeStringHTML(response.msg.p_content);

                        if(_this.detailsData.p_skills_name){
                            _this.detailsData.p_skills_name_arr = _this.detailsData.p_skills_name.split(',');
                        }
                        
                    }

                });
            },
            //下载附件
            downloadFile(fid,f_old_name,f_file_type){
                var _this = this;

                axios({
                    method: 'get',
                    url: '/api/index/Project/download',
                    params: {
                        'f_id': fid,
                    },
                    responseType: 'arraybuffer',

                })
                .then(function (response) {

                    _this.download(response.data,f_old_name,f_file_type);

                })
                .catch(function (error) {
                    alert(error.response.data.msg);
                });
            },
            // 下载文件
            download (data,f_old_name,f_file_type) {
                if (!data) {
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data]));
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', f_old_name +'.'+f_file_type);

                document.body.appendChild(link);
                link.click();
            },
            //获取手机号
            getPhone(){
                var _this = this;
                //判断是否有返回手机号，有则直接展示，无则积分换取
                if(_this.detailsData.p_contacts_phone){
                    this.$alert(_this.detailsData.p_contacts_phone, '手机号', {
                        confirmButtonText: '确定',
                        callback: action => {}
                    });
                }else{

                    // 获取用户积分、需消耗积分
                    _this.$httpGet('/api/index/Project/getintegralForUid',{
                        'u_id': window.localStorage.uid,
                    }).then(response => {
                        
                        if(response.code == 200){

                            _this.integral = response.msg;
                            _this.getPhoneDialog = true;
                        }

                    });
                    
                }
            },
            //积分兑换手机号
            dhPhone(){

                var _this = this;

                if(_this.gzPhone == '***********'){
                    _this.$httpGet('/api/index/Project/lookProjectContact',{
                        'p_uid': window.localStorage.uid,
                        'p_id': _this.$route.query.id,
                    }).then(response => {
                        
                        if(response.code == 200){

                            _this.gzPhone = response.msg.p_contacts_phone;
                            _this.integral.u_integral = response.msg.u_integral;

                            this.$message({
                                message: '兑换成功',
                                type: 'success'
                            });

                        }

                    });
                }else{
                    _this.getPhoneDialog = false;
                }
                
            },
            //竞标报名
            biddingFun(pid){

                var _this = this;
                this.$confirm('为保障接发包双方权益，对于恶意竞标、扰乱平台接发包秩序等行为，一经发现或举报，我们将按照《众包平台规范》等相关规则协议从严从重处理，请认真对待每一次竞标机会。', '竞标须知', {
                    confirmButtonText: '开始竞标',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.$router.push({path: '/projectsbidding',query:{'pid': pid}});
                }).catch(() => {
                            
                });
            },
            //解析编辑器内容
            escapeStringHTML(str) {
                str = str.replace(/&amp;/g,'&');
                str = str.replace(/&lt;/g,'<');
                str = str.replace(/&gt;/g,'>');
                str = str.replace(/&quot;/g,'"');
                return str;
            },
        },
        mounted(){
            this.init();
        },
    }
</script>